<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head :: head(~{::title}, ~{::style})">
    <meta charset="utf-8">
    <title>通知公告-详情</title>
    <style>
        h5 {
            font-weight: bold;
            text-align: center;
            font-size: 16px;
            color: #000;
        }

        .author_p {
            text-align: center;
            font-size: 14px;
        }

        .content {
            font-size: 16px;
            color: #666;
        }

        .reply-date {
            margin-left: 10px;
        }

        .reply-header {
            color: #666;
        }

        .reply-content {
            margin: 20px 0 10px 0;
            color: #666;
        }

        .unknow-cell {
            display: none
        }

        .isknow-cell {
            display: none
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">通知公告</h1>
</header>
<div class="mui-content">
    <div class="mui-table-view">
        <div class="mui-table-view-cell">
            <h5 class="title"></h5>
            <p class="author_p"></p>
        </div>
        <div class="mui-table-view-cell">
            <p class="content"></p>
        </div>
        <div class="mui-table-view-cell unknow-cell">
            <p><span class="unknow"></span></p>
        </div>
        <div class="mui-table-view-cell isknow-cell">
            <p><span class="isknow"></span></p>
        </div>

        <ul class="mui-table-view mui-table-view-chevron att_ul" th:if="${#lists.size(attachments)>0}">
            <li class="mui-table-view-cell mui-media ">附件列表：</li>
            <li th:each="att, stat : ${attachments}" class="mui-table-view-cell mui-media att-li" th:attr="fId=${att.id}">
                <div class="mui-slider-handle">
                    <a class="attFile" href="javascript:;" th:attr="link=${att.visualPath} + ${att.diskName}">
                        <img class="mui-media-object mui-pull-left"
                             th:src="'../../weixin/images/file/' + ${att.icon}"/>
                        <div class="mui-media-body">
                            [[${att.name}]]
                        </div>
                    </a>
                </div>
            </li>
        </ul>
        <div th:if="${isForceReply}" class="mui-table-view" id="remindCell">
            <div class="mui-table-view-cell" style="color:red">
                该通知须回复
            </div>
        </div>
        <form th:if="${isNeedReply}" id="formAdd" class="mui-input-group">
            <div class="mui-input-row" data-code="content" data-isnull="false">
                <label><span>回复</span><span style='color:red;'>*</span></label>
                <div style="text-align:center">
                    <textarea id="content" name="content" placeholder="请输入回复内容" style="height:150px;"></textarea>
                </div>
            </div>
            <div class="mui-button-row">
                <button type="button" style="margin-left:5px;" class="mui-btn mui-btn-primary mui-btn-outlined btn-ok">
                    确定
                </button>
            </div>
        </form>
        <ul class="mui-table-view" th:if="${isReplyExist}">
            <li class="mui-table-view-cell">
                <div class="reply-header">
                    <span class="reply-name">[[${nav.realName}]]</span>
                    <span class="reply-date">[[${#temporals.format(oaNoticeReply.replyTime, 'yyyy-MM-dd')}]]</span>
                </div>
                <div class="reply-content">[[${oaNoticeReply.content}]]</div>
            </li>
        </ul>
        <ul class="mui-table-view reply-ul" th:if="${isShowReply}">
            <th:block th:each="reply, stat : ${replyList}">
                <li class="mui-table-view-cell">
                    <div class="reply-header">
                        <span class="reply-name">[(${reply.user.realName})]</span>
                        <span class="reply-date">[(${#temporals.format(reply.replyTime, "yyyy-MM-dd HH:mm:ss")})]</span>
                    </div>
                    <div class="reply-content">[(${reply.content})]
                    </div>
                </li>
            </th:block>
        </ul>
    </div>
    <script th:inline="javascript">
        var isUniWebview = [[${nav.isUniWebview}]];
        if (!mui.os.plus) {
            // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
            $('.mui-bar').remove();
        } else {
            if (isUniWebview) {
                $('.mui-bar').remove();
            }
        }

        if(mui.os.plus) {
            // 注册beforeback方法，以使得在流程处理完后退至待办列表页面时能刷新页面
            // if (isUniWebview) {
                mui.init({
                    keyEventBind: {
                        backbutton: false // 关闭back按键监听
                    },
                    swipeBack: false //启用右滑关闭功能
                });
            // }
        }

        (function ($) {
            /*$.init({
                swipeBack: true //启用右滑关闭功能
            });*/

            var url = "../../public/notice/getNotice";
            var _url = "public/notice/getNotice";
            if (mui.os.plus && mui.os.ios) {
                // 将路径改为完整的路径，否则ios中5+app会因为spring security不允许url中包括../而致无法访问
                var rootPath = this.getContextPath();
                var p = rootPath.indexOf('/weixin');
                if (p != -1) {
                    rootPath = rootPath.substring(0, p);
                }
                url = rootPath + "/" + _url;
            }
            var ajax_get = function (datas) {
                $.get(url, datas, function (data) {
                    var noticeObj = data.data;
                    jQuery(".title").html(noticeObj.title);
                    jQuery(".content").html(noticeObj.content);
                    jQuery(".author_p").html(noticeObj.userRealName + "发布于：" + noticeObj.createData);
                    if (("unKnows" in noticeObj) && ("knows" in noticeObj)) {
                        jQuery(".unknow").html("未查看用户：" + noticeObj.unKnows);
                        jQuery(".isknow").html("已查看用户：" + noticeObj.knows);

                        jQuery('.unknow-cell').show();
                        jQuery('.isknow-cell').show();
                    }

                }, "json");
            };
            ajax_get({"id": [[${noticeId}]], "skey": [[${nav.skey}]]});
        })(mui);

        // 路径为 /oa/notice/getFile?attachId=...
        var contextPath = [[@{/}]];

        var self = this;
        // @TASK 得考虑支持obs的情况
        $(".mui-content").on("tap", ".attFile", function () {
            var isMobileForbidDownload = [(${isMobileForbidDownload})];
            if (isMobileForbidDownload) {
                mui.toast('手机端禁止下载文件');
                return;
            }

            var id = jQuery(this).parent().parent().attr('fId');
            var url = jQuery(this).attr("link");
            var p = url.lastIndexOf(".");
            var ext = url.substring(p + 1);
            // if (ext == "jpg" || ext == "jpeg" || ext == "png" || ext == "gif" || ext == "bmp") {
            //     showImg(url);
            // } else {
                // url得是完整的路径，否则会报400错误
                // url = contextPath + url;
            url = "/notice/getFile?attachId=" + id;
            console.log('url', url);
            // 将路径改为完整的路径，否则ios中5+app会因为spring security不允许url中包括../而致无法访问
            var rootPath = self.getContextPath();
            var p = rootPath.indexOf('/weixin');
            if (p != -1) {
                rootPath = rootPath.substring(0, p);
            }
            url = rootPath + url;
            console.log('url2', url);

            if (mui.os.plus) {
                    var btnArray = ['是', '否'];
                    mui.confirm('您确定要下载么？', '', btnArray, function (e) {
                        if (e.index == 0) {
                            var dtask = plus.downloader.createDownload(url, {}, function (d, status) {
                                if (status == 200) {
                                    // 调用第三方应用打开文件
                                    plus.runtime.openFile(d.filename, {}, function (e) {
                                        alert('打开失败');
                                    });
                                } else {
                                    alert("下载失败: " + status);
                                }
                            });
                            dtask.start();
                        }
                    });
                } else {
                    mui.openWindow({
                        "url": url
                    })
                }
            // }
        });

        function showImg(path) {
            var openPhotoSwipe = function () {
                var pswpElement = document.querySelectorAll('.pswp')[0];
                var items = [{
                    src: contextPath + "public/showImg.do?path=" + encodeURI(path),
                    w: 964,
                    h: 1024
                }
                ];
                // define options (if needed)
                var options = {
                    // history & focus options are disabled on CodePen
                    history: false,
                    focus: false,
                    showAnimationDuration: 0,
                    hideAnimationDuration: 0
                };
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };
            openPhotoSwipe();
        }

        $(function () {
            $('.btn-ok').click(function () {
                var _tips = "";
                jQuery("div[data-isnull='false']").each(function (i) {
                    var _code = jQuery(this).data("code");
                    var _val = jQuery("#" + _code).val();
                    if (_val == undefined || _val == "") {
                        var _text = jQuery(this).find("span:first").text();
                        _tips += _text + " 不能为空<BR/>"
                    }
                });
                if (_tips != null && _tips != "") {
                    mui.toast(_tips);
                    return;
                }

                $.ajax({
                    type: "post",
                    url: "../../public/notice/addReply.do",
                    data: $('#formAdd').serialize() + "&skey=" + [[${nav.skey}]] + "&id=" + [[${noticeId}]],
                    dataType: "html",
                    contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
                    beforeSend: function (XMLHttpRequest) {
                    },
                    success: function (data, status) {
                        data = $.parseJSON(data);
                        if (data.ret == "1") {
                            var $ul = $('.reply-ul');
                            $ul.show();
                            var li = '<li class="mui-table-view-cell">';
                            li += '<div class="reply-header">';
                            li += '<span class="reply-name">' + [[${nav.realName}]] + '</span>';
                            li += '<span class="reply-date">' + [[${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}]] + '</span>';
                            li += '</div>';
                            li += '<div class="reply-content">' + $('#content').val() + '</div>';
                            li += '</li>';
                            $ul.prepend(li);

                            $('#formAdd').remove();
                            $('#remindCell').hide();
                        }
                        mui.toast(data.msg);
                    },
                    error: function (XMLHttpRequest, textStatus) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            });
        });

        function callJS() {
            return {"btnAddShow": 1, "btnAddUrl": "weixin/notice/notice_add.jsp"};
        }

        var iosCallJS = '{ "btnAddShow":1, "btnAddUrl":"weixin/notice/notice_add.jsp" }';
    </script>
    <div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
</body>
</html>